<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Download</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <style>
        /* 设置图表容器样式 */
        .chart-container {
            width: 400px;
            height: 300px;
            margin: 20px;
        }
    </style>
</head>

<body>
    <!-- 下载按钮 -->
    <button id="download-btn">下载图表</button>
    <!-- 三个 ECharts 图表容器 -->
    <div id="chart1" class="chart-container"></div>
    <div id="chart2" class="chart-container"></div>
    <div id="chart3" class="chart-container"></div>
    

    <script>
        // 初始化三个 ECharts 实例
        const chart1 = echarts.init(document.getElementById('chart1'));
        const chart2 = echarts.init(document.getElementById('chart2'));
        const chart3 = echarts.init(document.getElementById('chart3'));

        // 配置第一个图表
        const option1 = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };
        chart1.setOption(option1);

        // 配置第二个图表
        const option2 = {
            xAxis: {
                type: 'category',
                data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [20, 32, 41, 54, 60, 70, 80, 90, 100, 110, 120, 130],
                type: 'bar'
            }]
        };
        chart2.setOption(option2);

        // 配置第三个图表
        const option3 = {
            series: [{
                type: 'pie',
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }]
        };
        chart3.setOption(option3);

        // 获取下载按钮元素
        const downloadBtn = document.getElementById('download-btn');
        // 为下载按钮添加点击事件监听器
        downloadBtn.addEventListener('click', async () => {
            // 创建一个新的 ZIP 文件对象
            const zip = new JSZip();

            // 获取第一个图表的图片数据
            const chart1DataURL = chart1.getDataURL({
                type: 'png',
                pixelRatio: 2
            });
            // 将第一个图表的图片数据添加到 ZIP 文件中
            zip.file('chart1.png', chart1DataURL.split(',')[1], { base64: true });

            // 获取第二个图表的图片数据
            const chart2DataURL = chart2.getDataURL({
                type: 'png',
                pixelRatio: 2
            });
            // 将第二个图表的图片数据添加到 ZIP 文件中
            zip.file('chart2.png', chart2DataURL.split(',')[1], { base64: true });

            // 获取第三个图表的图片数据
            const chart3DataURL = chart3.getDataURL({
                type: 'png',
                pixelRatio: 2
            });
            // 将第三个图表的图片数据添加到 ZIP 文件中
            zip.file('chart3.png', chart3DataURL.split(',')[1], { base64: true });

            // 生成 ZIP 文件
            const content = await zip.generateAsync({ type: 'blob' });
            // 使用 FileSaver 库保存 ZIP 文件
            saveAs(content, 'charts.zip');
        });
    </script>
</body>

</html>